Example

In this lesson, we'll look at ESI in action with an example!

We'll cover the following

Introduction#

The example shows how Edge Side Includes (ESI) can be used to assemble HTML fragments from different sources and how the entire HTML can be sent to the browser. For this, the HTML contains special ESI tags that are replaced by HTML fragments.

svg viewer
Overview of the ESI Example

The drawing above shows an overview of the structure of the example.

  • The Varnish cache directs the HTTP request to the order microservice or the common service.
  • The order microservice contains the logic for processing orders.
  • The common service offers CSS assets and HTML fragments which microservices have to integrate into their HTML pages.

The example, therefore, shows a typical scenario. The applications like order deliver content that is displayed in a frame. The frame is provided by common so that all applications can uniformly integrate it.

svg viewer
Screenshot of the ESI Example

The screenshot above shows one page of the ESI example. The links to the home page, Thymeleaf, and the date are provided by the common service. The CSS and therefore the layout originate from the common service. The order service only provides a list of orders.

Thus, when additional microservices have to be integrated into the system, they only have to return the respective information in the middle. The frame and the layout are added by the common service.

During a reload, the time is updated but only every 30 seconds because the data is cached for that long. The cache works only if no cookies were sent in the request.

Running the example#

To start the example, hit run below. You’ll see a few commands running. You can access the app at the link generated below such as https://x6jr4kg.educative.run.

To run the code locally, follow these instructions: https://github.com/ewolff/SCS-ESI/blob/master/HOW-TO-RUN.md

Varnish, which is available in the Docker host at port 8080, receives the HTTP requests and processes the ESI tags. If the Docker containers are running on the local computer, you can reach Varnish at port 8080. For example, at https://localhost:8080.

The web pages of the order microservice can be accessed at https://localhost:8090. These web pages contain the ESI tags and therefore appear broken if displayed in a web browser.

/
docker-compose.yml
Your app can be found at: https://811lgmnxmw1xy.educative.run

In the next lesson, we’ll study Varnish, a web cache.

Introduction
Varnish
Mark as Completed
Report an Issue